<template>
  <section class="dialogSfz">
    <img @click="add_input" class="add_img" src="../assets/imgs/add.png" width="30px">
    <p v-for="(item,index) in form1" :key="index">
      <input
        type="tel"
        name
        id
        value
        v-model="item.input1"
        placeholder="请输入身份证"
        class="title_input"
        @keyup.enter="sure_submit"
      >
      <img
        @click="splic_input(index)"
        class="close_png"
        width="30px"
        src="../assets/imgs/tupu09.png"
        v-if="index!=0"
      >
    </p>
    <p style="text-align: center;margin-top: 10px;">
      <span @click="sure_submit" class="sure_submit">确认</span>
    </p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      form1: [{ input1: "" }]
    };
  },
  methods: {
    add_input() {
      this.form1.push({ input1: "" });
    },
    splic_input(index) {
      this.form1.splice(index, 1);
    },
    sure_submit() {
      /*确认*/
      let arr1 = this.form1.map(item => {
        return item.input1;
      });
      //      			console.log(arr1)
      //      			console.log([...(new Set(arr1))])
      this.$emit("sure_submit", [...new Set(arr1)]);
    }
  }
};
</script>

<style scoped="scoped">
.dialogSfz {
  position: relative;
}
.dialogSfz p {
  position: relative;
}
.title_input {
  border: solid 2px #4b92ee;
  border-radius: 40px;
  width: 222px;
  height: 25px;
  color: #4b92ee;
  padding-left: 15px;
  padding-right: 30px;
  margin-bottom: 15px;
}
.add_img {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 2;
}
.close_png {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  cursor: pointer;
  z-index: 1;
}
.sure_submit {
  padding: 10px 28px;
  background: #4b92ee;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
</style>